<!-- This needs to be quirks mode -->
<html>
<style>
table { display:inline-table; caption-side:bottom; border-collapse:collapse; border:2px solid black; }
td { width:100px; height:100px; }
</style>
<body style="height:2000px; overflow:hidden" class="scrollTop">
<script src="scrolling.js"></script>
<p><table style="background:url(repeatable-diagonal-gradient.png) fixed;">
  <td>&nbsp;
</table>
<table>
  <tbody style="background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
</table>
<table>
  <tr style="background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
</table>
<table>
  <td style="background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;
</table>
<p><table>
  <colgroup style="background:url(repeatable-diagonal-gradient.png) fixed;"></colgroup>
  <td>&nbsp;
</table>
<table>
  <col style="background:url(repeatable-diagonal-gradient.png) fixed;"></col>
  <td>&nbsp;
</table>
<table>
  <td>&nbsp;
  <caption style="background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;</caption>
</table>

<p><table>
  <tbody style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
</table>
<table>
  <tr style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;"><td>&nbsp;
</table>
<table>
  <td style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;
</table>
<p><table>
  <td>&nbsp;
  <caption style="opacity:0.5; background:url(repeatable-diagonal-gradient.png) fixed;">&nbsp;</caption>
</table>
</body>
</html>
